<template>
    <div id="login">
            <header>LOGIN ADMIN</header>

        <a-form
                name="custom-validation"
                :model="formState"
                @finish="handleFinish"
                @finishFailed="handleFinishFailed"
                layout="vertical"
        >
            <a-form-item has-feedback name="user">
                <a-input v-model:value="formState.user" autocomplete="off"  placeholder="userName">
                    <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                </a-input>
            </a-form-item>


            <a-form-item has-feedback name="pass">
                <a-input v-model:value="formState.pass" type="password" autocomplete="off"  placeholder="Password">
                    <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                </a-input>
            </a-form-item>

            <a-form-item>
                <a-button
                        type="primary"
                        html-type="submit"
                        :disabled="formState.user === '' || formState.pass === ''"
                >
                    Log in
                </a-button>
            </a-form-item>
        </a-form>


    </div>

</template>

<script>
    // import axios from 'axios'
    import { message } from 'ant-design-vue';
    import { login } from "@/api/user/index";
    import md5 from 'js-md5';
    import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
    import { defineComponent, reactive } from 'vue';
    import { useRouter } from 'vue-router';
    export default defineComponent({
        setup() {
            const router = useRouter();

            const formState = reactive({
                user: '',
                password: '',
            });

            /**
             * 登录
             * @param values
             */
            const handleFinish = values => {
                console.log(values, formState);
                let _self = this;
                if(!values.user) return
                else if(!values.pass) return

                var password = md5(values.pass);

                login(JSON.stringify({userName: values.user, password})).then(res => {
                    if(res.code===200){
                        localStorage.setItem("my-admin-id", res.id);
                        localStorage.setItem("my-admin-username", res.username);

                                setTimeout(function () {
                                    router.push({
                                        path: '/page/about'
                                    });
                                }, 1000);
                                console.log('Received values of form: ', values);

                    }else{
                        message.error(res.msg);
                    }

                })
            };

            const handleFinishFailed = errors => {
                console.log(errors);
            };

            return {
                formState,
                handleFinish,
                handleFinishFailed,
            };
        },

        components: {
            UserOutlined,
            LockOutlined,
        },
    });
</script>
<style scoped>
    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }
    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }
    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }


    #login{
        position: absolute;
        height: 300px;
        width: 300px;
        top:50%;
        left: 50%;
        margin:-150px;
    }


    #login header{
        font-size: 1.8rem;
        text-align: center;
        height:80px;
    }
</style>
